<template>
  <section class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input class="new-todo" autofocus placeholder="What needs to be done?" @keyup.enter="addTodo">
    </header>
    <section class="main" v-show="todos.length">
      <input id="toggle-all" class="toggle-all" type="checkbox" :checked="remaining === 0" @change="toggleAll">
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <li v-for="todo in filteredTodos" class="todo" :key="todo.id"
          :class="{ completed: todo.completed, editing: todo === editedTodo }">
          <div class="view">
            <input :id="todo.id" class="toggle" type="checkbox" v-model="todo.completed">
            <label @dblclick="editTodo(todo)" :for="todo.id">{{ todo.title }}</label>
            <button class="destroy" @click="removeTodo(todo)">X</button>
          </div>
          <input v-if="todo === editedTodo" class="edit" type="text" v-model="todo.title"
            @vnode-mounted="({ el }) => el.focus()" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)"
            @keyup.escape="cancelEdit(todo)">
        </li>
      </ul>
    </section>
    <footer class="footer" v-show="todos.length">
      <span class="todo-count">
        <strong>{{ remaining }}</strong>
        <span>{{ remaining === 1 ? 'item' : 'items' }} left</span>
      </span>
      <ul class="filters">
        <li>
          <a href="#/all" :class="{ selected: currentRoute === 'all' }">All</a>
        </li>
        <li>
          <a href="#/active" :class="{ selected: currentRoute === 'active' }">Active</a>
        </li>
        <li>
          <a href="#/completed" :class="{ selected: currentRoute === 'completed' }">Completed</a>
        </li>
      </ul>
      <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
        Clear completed
      </button>
    </footer>
  </section>
</template>

<script setup>
import { ref, computed, watchEffect } from 'vue'

const todos = ref(JSON.parse(localStorage.getItem('vue-todomvc') || '[]'))
const currentRoute = ref('all')
const editedTodo = ref()
let originTodoTitle
// hash路由监听及获取
const handleHashChange = () => {
  const route = window.location.hash.replace(/#\/?/, '')
  currentRoute.value = route || 'all'
}
handleHashChange()
window.addEventListener('hashchange', handleHashChange)
// 查todos(根据当前路由)
const filteredTodos = computed(() => {
  if (currentRoute.value === 'active') {
    return todos.value.filter(obj => !obj.completed)
  } else if (currentRoute.value === 'completed') {
    return todos.value.filter(obj => obj.completed)
  } else {
    return todos.value
  }
})
// 查todos未完成
const remaining = computed(() => {
  return todos.value.filter(obj => !obj.completed).length
})
// 增
const addTodo = (e) => {
  todos.value.push({
    id: new Date().getTime(),
    title: e.target.value,
    completed: false
  })
  e.target.value = ''
}
// 删
const removeTodo = (todo) => {
  todos.value = todos.value.filter(obj => obj.id !== todo.id)
}
// 删除已完成
const removeCompleted = () => {
  todos.value = todos.value.filter(obj => !obj.completed)
}
// 改
const editTodo = (todo) => {
  editedTodo.value = todo
  originTodoTitle = todo.title
}
const doneEdit = (todo) => {
  if (todo.title) {
    todo.title = todo.title.trim()
  } else {
    removeTodo(todo)
  }
  editedTodo.value = ''
}
const cancelEdit = (todo) => {
  todo.title = originTodoTitle
  editedTodo.value = ''
}
// 改为全完成
const toggleAll = (e) => {
  todos.value = todos.value.map(obj => {
    return {
      ...obj,
      completed: e.target.checked
    }
  })
}
// 持久化到localStorage
watchEffect(() => {
  localStorage.setItem('vue-todomvc', JSON.stringify(todos.value))
})
</script>

<style scoped>
.destroy {
  width: 30px;
  margin: 0 0 0 20px;
}

.selected {
  color: red;
}

.completed {
  text-decoration: line-through;
}

.editing {
  border: 1px solid rgb(46, 207, 25)
}

.main {
  margin: 20px 0;
}

.todo-list {
  margin: 10px 0 0 0;
}
</style>